<template>
  <view class="content">
    <view class="">
      <c-navBar
        title="分校管理"
        showAdd
        @addClick="addSchool"
        @search="search"
      ></c-navBar>
    </view>

    <view class="content-bottom-style">
      <c-list
        v-model:loading="loading"
        v-model:error="error"
        error-text="请求失败，点击重新加载"
        @load="Loads"
        class="school-list-container"
      >
        <van-empty description="暂无数据" v-if="schoolList.length === 0" />
        <view
          class="school-card"
          v-for="school in schoolList"
          :key="school.school_id"
        >
          <view class="flex flex-a flex-sb">
            <view class="info-box">
              <view class="label" style="margin-right: 10rpx">机构名称</view>
              <text class="value">{{ school.school_name }}</text>
            </view>
          </view>
          <view class="mt-13 flex flex-a">
            <view class="info-box" style="margin-right: 40rpx">
              <view class="label" style="margin-right: 20rpx">机构代码</view>
              <text class="value" style="margin-top: 5rpx">{{
                school.school_code
              }}</text>
            </view>
            <view class="info-box">
              <view class="label">代理级别</view>
              <text class="value" style="margin-left: 6rpx">{{
                levelType[school.level]
              }}</text>
            </view>
          </view>
          <view class="mt-13 flex flex-a">
            <view class="info-box" style="margin-right: 100rpx">
              <view class="label">负责人</view>
              <text class="value" style="margin-left: 20rpx">{{
                school.contact_name
              }}</text>
            </view>
            <view class="info-box">
              <view class="label" style="width: 100rpx">手机号</view>
              <text class="value">{{ school.contact_phone }}</text>
            </view>
          </view>
          <view class="mt-13 flex flex-a">
            <view class="info-box" style="margin-right: 68rpx">
              <view class="label" style="margin-right: 20rpx">机构状态</view>
              <view class="value tag">{{ schoolStatus[school.status] }}</view>
            </view>
            <view class="info-box">
              <view class="label" style="width: 110rpx">业务员</view>
              <text class="value">{{ school.salesman }}</text>
            </view>
          </view>
          <view class="info-box mt-13">
            <view class="label" style="margin-right: 20rpx">剩余小时</view>
            <text class="value" style="font-weight: 700"
              >{{ school.left_module_hour }}小时</text
            >
          </view>
          <view class="info-box mt-13" style="align-items: flex-start">
            <view class="label" style="width: 130rpx; margin-right: 20rpx"
              >所在区域</view
            >
            <text class="value">{{ school.area }}</text>
          </view>
          <view class="operation">
            <van-button
              @click="preview(school.school_id, 'preview')"
              class="customBtn ml-15"
              color="#808080"
              size="mini"
              >详情查看</van-button
            >
            <van-button
              class="customBtn ml-15"
              color="#808080"
              size="mini"
              @click="toRechargeHistory(school)"
              >充值记录</van-button
            >
            <!-- <van-button class="customBtn ml-15" color="#808080" size="mini"
  	        >使用记录</van-button
  	      > -->
          </view>
          <view class="operation">
            <van-button
              class="customBtn ml-15"
              color="#EB9D50"
              size="mini"
              @click="schoolAuth(school)"
              >分校认证</van-button
            >
            <van-button
              @click="toRecharge(school)"
              class="customBtn ml-15"
              color="#4E88E6"
              size="mini"
              >充值缴费</van-button
            >
            <van-button
              class="customBtn ml-15"
              color="#4E88E6"
              size="mini"
              @click.stop="edit(school.school_id, 'add')"
              >编辑</van-button
            >
            <van-button
              class="customBtn ml-15"
              color="#D43030"
              size="mini"
              @click.stop="deleteSchool(school.school_id)"
              >删除</van-button
            >
          </view>
        </view>
      </c-list>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue"
import { getSchoolList, delSchool } from "@/apis/school"
import { onLoad, onShow } from "@dcloudio/uni-app"
import { schoolStatus, levelType } from "@/utils/fieldMap"
import { showSuccessToast, showFailToast } from "vant"

const schoolList = ref([])
const loading = ref(false)
const error = ref(false)
const finished = ref(true)
const queryParams = reactive({
  search_data: ""
})
onShow(() => {
  Loads()
})
const Loads = () => {
  getList()
}
const search = (value) => {
  queryParams.search_data = value
  Loads()
}
const getList = () => {
  loading.value = true
  getSchoolList(queryParams)
    .then((res) => {
      if (res.code === 1) {
        schoolList.value = res.data
        loading.value = false
      } else {
        error.value = true
        loading.value = false
      }
    })
    .catch((err) => {
      error.value = true
      loading.value = false
    })
}
const edit = (id, type) => {
  goTo(`/pages/school/addSchool?schoolId=${id}&type=${type}`)
}
const preview = (id, type) => {
  goTo(`/pages/school/addSchool?schoolId=${id}&type=${type}`)
}
const schoolAuth = (school) => {
  goTo(
    `/pages/school/schoolAuth?schoolId=${school.school_id}&schoolName=${school.school_name}&status=${school.status}`
  )
}
const toRecharge = (school) => {
  goTo(`/pages/school/recharge?schoolId=${school.school_id}`)
}
const toRechargeHistory = (school) => {
  goTo(
    `/pages/school/rechargeHistory?schoolId=${school.school_id}&schoolName=${school.school_name}`
  )
}
const goTo = (url) => {
  uni.navigateTo({
    url: url
  })
}
const deleteSchool = (id) => {
  uni.showModal({
    title: "提示",
    content: "确认删除该分校信息吗？",
    success: function (res) {
      if (res.confirm) {
        confirmDelSchool(id)
        console.log("用户点击确定")
      } else if (res.cancel) {
        console.log("用户点击取消")
      }
    }
  })
}
const addSchool = () => {
  goTo("/pages/school/addSchool")
}
const confirmDelSchool = (id) => {
  delSchool({
    school_id: id
  }).then((res) => {
    uni.showSuccessToast("删除成功！")
    getList()
  })
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.content-bottom-style {
  width: 100%;
  flex: 1;
  overflow: hidden;
}

.school-list-container {
  .school-card {
    margin: 32rpx;
    border: 1px solid;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 5px;
    padding: 21px 9px 12px 10px;

    .mt-13 {
      margin-top: 26rpx;
    }

    .mr-28 {
      margin-right: 56rpx;
    }

    .info-box {
      font-size: 16px;
      display: flex;
      align-items: center;

      .label {
        color: rgba(51, 51, 51, 1);
        width: 75px;
      }
      .value {
        color: rgba(102, 102, 102, 1);
      }
      .tag {
        border-radius: 10px;
        background: #f7eabe;
        color: #ffc300;
        // padding: 3px 16px;
        font-size: 12px;
        width: 50px;
        height: 24px;
        line-height: 24px;
        text-align: center;
      }
    }
  }
  .operation {
    margin-top: 20rpx;
    text-align: right;
    .ml-15 {
      margin-left: 36rpx;
    }
  }
}
</style>
